<template>
  <view class="container">
    <view class="header">
    </view>
    <view class="avatar">
      <image class="avatar-img" :src="userInfo.headshot || defaultAvatar" mode="aspectFill" @tap="changeAvatar"></image>
    </view>
    <view class="form-group">
      <text class="label">用户名:</text>
      <input class="input" type="text" v-model="username" placeholder="未填写用户名" />
    </view>
    <view class="form-group">
      <text class="label">性别:</text>
      <picker class="input" mode="selector" :range="genderOptions" @change="handleGenderChange">
        <text>{{ gender||'未填写' }}</text>
      </picker>
    </view>
    <view class="form-group">
      <text class="label">生日:</text>
      <picker class="input" mode="date" @change="handleDateChange">
        <view>{{ birthday||'未填写' }}</view>
      </picker>
    </view>

    <view class="form-group">
      <text class="label">个性签名:</text>
      <input class="input" type="text" v-model="message" placeholder="这个人很懒，什么都没有留下" />
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
        genderOptions: ['男', '女', '其他'], // 性别选项列表
        defaultAvatar:'/static/s19.jpg',
        username:"",
        message:"",
        gender:"",
		birthday:"",
        userInfo: {
      },
    };
  },
  onShow() {
   // 页面显示时调用的方法
   console.log('页面显示了');
  // 获取存储的数据
  this.userInfo = uni.getStorageSync('userInfo');
  this.gender+=this.userInfo.gender;
  // 检查存储的数据是否存在
  if (this.userInfo) {
      // 存储的数据存在，您可以在这里使用它
      console.log(this.userInfo);
  } else {
      // 如果存储的数据不存在，则可能出现错误或者之前没有存储任何数据
      console.log("没有找到存储的数据");
  }
  
  },
  methods: {
    handleGenderChange(event) {
      const index = event.detail.value; // 获取选择的索引
      this.userInfo.gender = this.genderOptions[index]; // 更新性别
      // 在这里可以添加其他逻辑，例如将选择的性别发送到后端或执行其他操作
    },
    handleDateChange(event) {
      // 处理日期选择器变化事件
      this.userInfo.birthday = event.detail.value;
    },
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          // 选择成功后将头像地址赋给userInfo.headshot
          this.defaultAvatar = res.tempFilePaths[0];
          uni.uploadFile({
                    // url: this.$BASE_URL.BASE_URL+'/upload',
                    name: 'file',
                    filePath: this.defaultAvatar,
                    success: function(uploadRes) {
                      console.log(uploadRes.data);
                        this.defaultAvatar=uploadRes.data;
                    uni.setStorageSync('headshot', this.defaultAvatar);
                    console.log(this.defaultAvatar)
                    
                    },
                    fail(){
                      uni.showToast({
                          title:"请检查网络设置",
                          icon:"none"
                      })
                    }
          })
        },
      });
    },
    // updateUserInfo() {
    //     console.info(this.userInfo)
    //     this.username+=this.userInfo.username;
    //     this.message+=this.userInfo.message;
    //     this.location+=this.userInfo.location;
    //     console.log("色法",this.defaultAvatar)
    //     // this.userInfo.headshot=uni.getStorageSync('headshot', this.defaultAvatar);
    //     console.log(this.userInfo);
    //     if(this.username.length>20)
    //     {
    //         uni.showToast({
    //             title:"用户名长度应小于20位",
    //             icon:"none"
    //         })
    //         return;
    //     };
    //     if(this.location.length>50)
    //     {
    //         uni.showToast({
    //             title:"位置信息长度应小于20位",
    //             icon:"none"
    //         })
    //         return;
    //     };
    //     if(this.message.length>200)
    //     {
    //         uni.showToast({
    //             title:"个人简介长度应小于200位",
    //             icon:"none"
    //         })
    //         return;
    //     }
    //     uni.request({
    //         url:this.$BASE_URL.BASE_URL+'/updata/user',
    //         method:"POST",
    //         data:this.userInfo,
    //         success: (res) => {
    //             if(res.data.code===1)
    //             {
    //                 uni.showToast({
    //                     title:"信息修改成功",
    //                 })
    //                 uni.setStorageSync('userInfo', this.userInfo);
    //                 uni.redirectTo({
    //                     url:"/pages/userinformation/userinformation"
    //                 })
    //             }
    //             else{
    //                 uni.showToast({
    //                     title:"信息修改失败",
    //                     icon:"none"
    //                 })
    //             }
    //         }
    //     })
    // }, 
  },
};
</script>

<style>
.error {
  color: #ff0000;
  font-size: 12px;
}
.container {
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.avatar {
  text-align: center;
  margin-bottom: 20px;
}

.avatar-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.btn-edit-avatar {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
}

.form-group {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.label {
  width: 80px;
  margin-right: 10px;
}

.input {
  flex: 1;
  padding: 5px;
  border: none;
  border-bottom: 1px solid #ccc;
}

.btn {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}
</style>